<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>订单详情待支付</title>
		<!-- 引入字体图标 -->
		<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css"/>
		<!-- 引入全局配置 -->
	    <link rel="stylesheet" type="text/css" href="css/start.css">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/orderPay.css"/>
		<script type="text/javascript" src="js/common/jquery-1.12.2.js"></script>
		<script type="text/javascript"  src="js/common/baseUrl.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
		<script src="js/artTemplate/template.js" charset="utf-8"></script>
		<script src="js/common/orderPay.js" charset="utf-8"></script>
	</head>
	<body class="orderbox">
		<!-- 头部 -->
    <div id="header">
        <div class="top">
            <div class="top-left">
                <i class="fa fa-map-marker "></i>
                <a href="javascript:void(0)" class="one">广州</a>
                <a href="javascript:void(0)" class="two">切换城市</a>
            </div>
            <div class="top-right">
                <a class="one">
                    <i class="fa fa-user"></i> 朱莉
                </a>
                <a href="javascript:void(0)">退出</a>
                <a href="javascript:void(0)">帮助中心</a>
                <a href="javascript:void(0)">网站导航</a>
                <a href="javascript:void(0)">手机APP</a>
            </div>
        </div>
    </div>

    <div id="orderdetail">
	    	<!--搜索框-->
	    	<div class="searchBox">
						<div class="search">
						<div class="search-left">
							<span class="husheng">互生</span>
							<span class="vertical">|</span>
							<span class="evaluate">休闲娱乐</span>
						</div>
						<div class="search-right">
							<div class="one">
								<input type="text" name="search" id="search" value="" placeholder="输入商家名称、分类或地区" />
								<a href="javascript:void(0)">
									<i class="fa fa-search"></i>
								</a>
							</div>
							<div class="two">
								<a href="#">运动健身</a>
								<a href="#">瑜伽</a>
								<a href="#">羽毛球</a>
								<a href="#">CS</a>
								<a href="#">农家乐</a>
								<a href="#">私人影院</a>
							</div>
						</div>
					</div>
				</div>
				<!--订单详情内容-->
				<div class="include"  id="include">
					<script id="orderPay" type="text/html">
							<div class="bigbox">
	    			<!--订单详情-->
		    		<div class="top">订单详情</div>
		    		<div class="status">
		    			<span class="current">当前状态:</span>
		    			<span class="wait">待付款</span>
		    			<span class="tips">{{hh}}时{{mm}}分{{ss}}秒之后订单会自动取消,请尽快支付</span>
		    		</div>
		    		<!--订单信息-->
		    		<div class="orderinfor">订单信息</div>
		    		<div class="container">
			    			<div class="detailinfor">
									<div class="ordernum left">
										订单编号:
										<span>{{orderDetail.id}}</span>
									</div>
									<div class="time left">
										下单时间:
										<span>{{orderDetail.orderCreateTime}}</span>
									</div>
									<div class="tatol left">
										总价:
										<img src="img/jinbi.png"/>
										<span class="money">{{orderDetail.orderAmount}}</span>
									</div>
									<div class="shopcoupon left">
										商家优惠券:
										<img src="img/惠Circle.png"/>
										<span class="money">-{{orderDetail.shopCouponsDiscount}}</span>
									</div>
								</div>
								<div class="detailinfor2">
							<div class="dikoucoupon left">
								消费抵扣券:
								<img src="img/yhq1.png"/>
								<span class="green">-{{orderDetail.ptCouponsDiscount}}</span>
							</div>
							<div class="shifu left">
								实付:
								<img src="img/jinbi.png"/>
								<span class="money">{{orderDetail.payAmount}}</span>
							</div>
							<div class="jifen left">
								消费积分:
								<img src="img/yhq3.png"/>
								<span class="pv">{{orderDetail.perPoint}}</span>
								<span class="beizhu">(积分在交易完成后到账)</span>
							</div>
						</div>
		    		</div>
		    		<!--服务项目-->
		    		<div class="serive">
		    			<span class="item">服务项目</span>
		    			<span class="number">数量</span>
		    			<span class="totalprice">总价</span>
		    		</div>
		    		<!--服务项目详情-->

		    		<div class="serviceiteminfor">
		    			<div class="img">
		    				<img src="{{picUrl}}{{orderDetail.goodsImg}}"/>
		    			</div>
		    			<div class="iteminfor">
		    				<p class="one">{{orderDetail.goodsName}}</p>
		    				<div class="two">
		    					<div class="two1 left">
		    						<img src="img/yhq2.png"/>
		    						<span class="money">{{orderDetail.goodsUintPrice}}</span>
		    					</div>
		    					<div class="two2 left">
		    						<img src="img/yhq3.png"/>
		    						<span class="pv">{{orderDetail.goodsPerPoint}}</span>
		    					</div>
		    					<div class="two3 left">{{orderDetail.buyCount}}</div>
		    					<div class="two4 left">
		    						<img src="img/yhq2.png"/>
		    						<span class="money">{{orderDetail.orderAmount}}</span>
		    					</div>
		    				</div>
		    				<div class="three">
		    					<div class="three1 left">
		    						<img src="img/随时退.png"/>
		    						<span class="sui">随时退</span>
		    					</div>
		    					<div class="three2 left">
		    						<img src="img/随时退.png"/>
		    						<span class="sui">出售不退</span>
		    					</div>
		    				</div>
		    			</div>
		    		</div>
						<!--********店家信息*********-->
						<div class="shop">
							<p class="swap">
								<span class="work">{{orderDetail.shopName}}</span>
								<span class="worknum">({{orderDetail.shopId}})</span>
							</p>
							<p class="swap">
								<span class="location">{{orderDetail.shopAddress}}</span>
								<img src="img/map.png"/>
								<a  class="map" href="#" >查看地图</a>
							</p>
						</div>
						<!--*****服务人员****-->
						<div class="serivepeopledetail">
							<span class="serivepeople">
								服务人员
							</span>
							<span class="tips">重要提示:服务人员不能提供服务商时,可协商变更</span>
						</div>
						<!--服务人员头像-->
						<div class="servicepicture">
							{{each staffs item}}
								<div class="inset">
									<img src="{{picUrl}}{{item.headUrl}}"/>
									<p class="zhangsan">{{item.jobName}}</p>
								</div>
							{{/each}}
						</div>
						<!--客户信息-->
						<div class="bottom">
							<div class="customer">
				    			<div class="servicetime left">
				    				服务时间:
				    				<span class="info">{{orderDetail.applyServiceTime}}</span>
				    			</div>
				    			<div class="right">
				    				订单金额:
				    				<img src="img/yhq2.png"/>
				    				<span class="money">{{orderDetail.orderAmount}}</span>
				    			</div>
				    		</div>
				    		<div class="customer">
				    			<div class="tel left">
				    				预留手机号:
				    				<span class="info">{{orderDetail.contactPhone}}</span>
				    			</div>
				    			<div class="right">
				    				商家优惠券:
				    				<img src="img/惠Circle.png"/>
				    				<span class="money">-{{orderDetail.shopCouponsDiscount}}</span>
				    			</div>
				    		</div>
				    		<div class="customer">
				    			<div class="left">
				    				预计到店时间:
				    			    <span class="info">{{orderDetail.exceptShopTime}}</span>
				    			</div>
				    			<div class="right">
				    				消费抵扣券:
				    				<img src="img/yhq1.png"/>
				    				<span class="green">-{{orderDetail.ptCouponsDiscount}}</span>
				    			</div>
				    		</div>
				    		<div class="customer">
				    			<div class="right">
				    				消费积分:
				    				<img src="img/yhq3.png"/>
				    				<span class="pv">{{orderDetail.perPoint}}</span>
				    			</div>
				    		</div>
				    		<div class="customer1">
				    			<div class="right">
				    				实付金额:
				    				<img src="img/yhq2.png"/>
				    				<span class="bigmoney">{{orderDetail.payAmount}}</span>
				    			</div>
				    		</div>
				    		<div class="button">
				    			<div class="buttonin right">
					    			<div class="cancael left" onclick="clearOrder({{orderDetail.id}})">取消订单</div>
					    			<div class="sure right"  onclick="atPay({{orderDetail}})">立即支付</div>
				    			 </div>
				    		</div>
						</div>
	    		</div>
					</script>
				</div>
    </div>
    <!--********底部********-->
			<div class="foot" id="foot">
				<p>
					<strong>客服热线： </strong>
					<a href="javascript:void(0)">
						0755-83344111
					</a>
					<span class="foot-adition">2013-2018 </span>
					<span>
						深圳市互生电子商务有限公司
					</span>
					<span>
						粤ICP备案号14100052号
					</span>
				</p>
		    </div>

	</body>
</html>
